<template>
  <div>
    <img :src="pages" @click="handleOpen" />
    <el-drawer
      :modal="false"
      size="280px"
      :show-close="true"
      :visible.sync="drawer"
      :with-header="false"
      :before-close="handleClose"
      :wrapperClosable="true"
      :modal-append-to-body="false"
      custom-class="drawer-class"
    >
      <div class="menu-annex-box">
        <div class="menu-title-line-box">
          <div class="menu-title-line">
            <div class="menu-title-text-box">文档中心</div>
            <div class="menu-title-left">
              <div class="menu-head-btn" @click="handleAddPage">
                <img :src="addPage" />
              </div>
              <div class="menu-head-btn" @click="handleClose">
                <img :src="close" />
              </div>
            </div>
          </div>
        </div>
        <div class="menu-annex-body">
          <el-scrollbar>
            <div class="preview-cells-box">
              <div
                class="page-out-box"
                :class="[activeScenePath === item.path ? 'active' : '']"
                v-for="(item, index) in list"
                :key="index"
              >
                <div
                  class="page-box"
                  :class="[item.file.type.match(/ppt/) ? 'ppt-cover' : 'doc-cover']"
                  @click="setScenePath(item)"
                ></div>
                <div class="page-box-under-right" @click="removeScene(item)">
                  <img :src="deleteIcon" />
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import close from './src/image/close.svg'
import addPage from './src/image/add-page.svg'
import deleteIcon from './src/image/delete.svg'
import pages from './src/image/pages.svg'
export default {
  name: 'PreviewController',
  props: {
    room: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      close,
      addPage,
      deleteIcon,
      pages,
      isFocus: false,
      roomState: this.room.state,
      sceneDir: this.room.state.sceneState.scenePath.split('/').slice(0, -1),
      hoverCellIndex: null,
      drawer: false,
      activeIndex: '',
      scenePath: ''
    }
  },

  computed: {
    scenes() {
      return this.room.state.sceneState.scenes
    },
    list() {
      const entireScenes = this.room ? this.room.entireScenes() : {}
      const paths = Object.keys(entireScenes)

      let scenes = []
      for (let dirPath of paths) {
        const sceneInfo = {
          path: dirPath,
          file: {
            name: dirPath,
            type: 'whiteboard'
          },
          type: 'static',
          rootPath: ''
        }
        if (entireScenes[dirPath]) {
          sceneInfo.rootPath =
            ['/', '/init'].indexOf(dirPath) !== -1
              ? '/init'
              : `${dirPath}/${entireScenes[dirPath][0].name}`
          sceneInfo.type = entireScenes[dirPath][0].ppt ? 'dynamic' : 'static'
          if (sceneInfo.type === 'dynamic') {
            sceneInfo.file.type = 'ppt'
          }
        }
        scenes.push(sceneInfo)
      }

      const _dirs = []
      scenes.forEach(it => {
        _dirs.push({
          path: it.path,
          rootPath: it.rootPath,
          file: it.file
        })
      })
      return _dirs
    },
    activeScenePath() {
      const path = this.room.state.sceneState.scenePath
      const _dirPath = this.pathName(path)
      const currentScenePath = _dirPath === '' ? '/' : `${_dirPath}`
      return currentScenePath
    }
  },

  methods: {
    handleOpen() {
      this.drawer = true
    },

    handleClose() {
      this.drawer = false
    },
    removeScene(item) {
      this.room.removeScenes(item.path)
    },
    setScenePath(item) {
      if (item.rootPath == '/init') {
        this.room.setScenePath('')
      } else {
        this.room.setScenePath(item.rootPath)
      }
      this.zoomChange(1)
    },
    pathName(path) {
      const cells = path.split('/')
      const popCell = cells.pop()
      if (popCell === '') {
        cells.pop()
      }
      return cells.join('/')
    },
    handleAddPage() {
      const newIndex = this.room.state.sceneState.index + 1
      const scenePath = this.room.state.sceneState.scenePath
      const currentPath = `${this.pathName(scenePath)}`
      this.room.putScenes(currentPath, [{}], newIndex)
      this.room.setSceneIndex(newIndex)
    },

    onRoomStateChanged(modifyState = {}) {
      this.roomState = { ...this.room.state, ...modifyState }
      const images = Array.from(document.querySelectorAll('.ppt-image'))
      this.scenes.forEach((scene, index) => {
        if (!(index < images.length)) return
        this.setupDivRef(images[index], scene)
      })
    },

    setupDivRef(el, scene) {
      const path = this.sceneDir.concat(scene.name).join('/')
      this.room.scenePreview(path, el, 208, 156)
    },

    setupDivRefOnMounted(pptImage) {
      const index = pptImage.index
      if (!this.scenes || !(index < this.scenes.length)) return
      this.setupDivRef(pptImage.$el, this.scenes[index])
    },
    zoomChange(scale) {
      this.room.moveCamera({
        centerX: 0,
        centerY: 0,
        scale: scale
      })
    }
  },
  mounted() {
    this.room.callbacks.on('onRoomStateChanged', this.onRoomStateChanged)
    document.body.addEventListener('mouseup', this.onRoomStateChanged)
  }
}
</script>

<style lang="scss">
@import './PreviewController.scss';
.hidden {
  visibility: hidden;
}
.drawer-class {
  outline: 0;
}
</style>
